import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    DeviceEventEmitter
} from 'react-native'
import NavBar from 'src/components/navBar'
import {deviceHeight} from "src/util"
import ActionSheet from 'react-native-actionsheet'
import {avatarUpdate} from "src/service/Auth"
import ImagePicker from 'react-native-image-crop-picker'
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"
import { Flex } from '@ant-design/react-native';
import Auth from '../../../service/Auth'
import StorageDatas from '../../../utils/storageDatas'

@inject('userAuth')
export default class MySettingPage extends Component<{}> {
    constructor (props) {
        super(props)
        this.state = {
           imageUrl:'',
           isRefresh:false,
        }
    }

    componentDidMount=()=>{
        this.setState({
            imageUrl:this.props.userAuth.currentUser.avatar
        })
    }

    logOutApp=()=>{
        Layer.showLoading()
        Auth.LoginOut({token:this.props.userAuth.token}).then((res)=>{
        Layer.hiddenLoading()
        if(res.status == 'success'){
          navigationhelper.push('Login')

          StorageDatas.removeDataByKey('userAccount')
        }
     }).catch((error) => {
        Layer.hiddenLoading()
        Layer.showMsg(error.message)
    })

    }


    cellViewImage =(title,imageUrl)=>{
        return(
         <Flex style={styles.cellViewRight}
         onPress={()=>{
            this.ActionSheet.show()
        }}>
         <Text>{title}</Text>
         <View style={{flexDirection:'row',alignItems:'center'}}>
         <Image defaultSource={require('src/assets/mine/userDefaultAvatar.png')} source={{uri:imageUrl}} style={{width:40,height:40,borderRadius:20}}></Image>
         <Image source={require('src/assets/mine/arrowRightGrey.png')} style={{width:25,height:25}}></Image>
         </View>
         </Flex>
        )
    }

    cellView =(title,content)=>{
        return(
         <View style={styles.cellView}>
         <Text>{title}</Text>
         <Text style={{color:'#8E8E93',fontSize:15}}>{content}</Text>
         </View>

        )
    }

    cellViewRightView =(title,content)=>{
        return(
         <Flex style={styles.cellViewRight} onPress={()=>{
            if(title == '手机号'){
                navigationhelper.push('ChangePhoneNum',{callback:()=>{this.setState({
                    isRefresh:true
                })}})
            }else if(title == '费率'){
                navigationhelper.push('Rate')
            }else if(title == '登录密码'){
                navigationhelper.push('ReSetPassword')
            }else{
                navigationhelper.push('ChagePayPassWord')
            }
         }}>
         <Text>{title}</Text>
         <View style={{flexDirection:'row',alignItems:'center'}}>
         <Text style={{color:'#8E8E93',fontSize:15}}>{content}</Text>
         <Image source={require('src/assets/mine/arrowRightGrey.png')} style={{width:25,height:25}}></Image>
         </View>
         </Flex>
        )
    }
    render() {
        const {imageUrl} = this.state
        const {nick_name,create_time,real_name,mobile,idcard,card_number,consume_rate,recommend_mobile} = this.props.userAuth.currentUser
        return (
        <View style={{flex:1}}>
                <NavBar 
                 back={()=>{navigationhelper.goBack() }}
                 title="设置"
            />
      <ScrollView>
        <View style={{backgroundColor:'transparent',height:10}}/> 
        {this.cellViewImage('头像',imageUrl)}
        {this.cellView('姓名',real_name?real_name:nick_name)}
        {this.cellView('身份证ID',idcard)}
        {this.cellView('储蓄认证',card_number)}
        {this.cellView('注册时间',create_time)}
        <View style={{backgroundColor:'transparent',height:10}}/>
        {this.cellViewRightView('手机号',mobile)}
        {this.cellViewRightView('登录密码','   ')}
        {/* {this.cellViewRightView('支付密码','   ')} */}
        <View style={{backgroundColor:'transparent',height:10}}/>
        {this.cellView('推荐人',recommend_mobile)}
        {this.cellViewRightView('费率', ' ')}
        <View style={{backgroundColor:'transparent',height:10}}/>
        <Flex style={styles.logoutView} onPress={()=>{
           this.logOutApp()
        }}>
        <Image source={require('src/assets/logoutIcon.png')} style={{width:20,height:20}}></Image>
        <Text style={{color:'#2E2E2E',marginLeft:10,fontFamily:'PingFang SC'}}>安全退出</Text>
        </Flex>

        <View style={{backgroundColor:'transparent',height:30}}/>

     <ActionSheet
         ref={o => this.ActionSheet = o}
         options={['拍照', '从手机相册选择', '取消']}
         cancelButtonIndex={2}
           onPress={(index) => {
        var promise = undefined
        if(index === 0) {
            promise = ImagePicker.openCamera({
                width: 300,
                height: 400,
                cropping: true,
            })
        }else if(index == 1) {
            promise = ImagePicker.openPicker({
                width: 300,
                height: 400,
                cropping: true
            })
        }
        if(promise){
            promise.then(image => {
                Layer.showLoading()
                avatarUpdate({
                    image: image,
                    token: this.props.userAuth.token,
                }).then((res) => {
                    Layer.hiddenLoading()
                    if(res.status == 'success'){
                        this.props.userAuth.fetchCurrentUserInfo({token: this.props.userAuth.token})
                        this.setState({
                            imageUrl:res.data
                        })
                        setTimeout(function() {
                            DeviceEventEmitter.emit('refreshUserInfo')
                          }, 1000);
                     }
                   
                })
            })
        }
        }}/>
     </ScrollView>
     </View>   
     )}
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: deviceHeight,
        backgroundColor: '#F5F5F5'
    },
    cellView:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        paddingHorizontal: 20,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    },
    cellViewRight:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        paddingLeft:20,
        paddingRight:15,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    },
    logoutView:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'center',
        paddingHorizontal: 20,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    }
    
})